<template>
  <div class="flex direction-column height-100">
    <div class="flex align-center justify-between overview margin-bottom">
      <div v-for="item in overview" :key="item.label" class="overview-item">
        <div class="overview-label">{{ item.label }}</div>
        <p class="overview-content">
          <span :style="{color: themeColor}" class="overview-number">{{ item.count }}</span>
          <span class="overview-unit">{{ item.unit }}</span>
        </p>
      </div>
    </div>
    <div class="button-group">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table
      v-loading="loading" :data="lists"
      :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }" class="table"
      height="100%"
    >
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
      <el-table-column label="操作" prop="operate" align="center" width="160">
          <template #default="{ row }">
            <td-button icon="editor" title="编辑" @click="edit(row)"></td-button>
            <td-button icon="ashbin" title="删除" icon-style="color: var(--danger-color);border-color: var(--danger-color);" @click="del(row)"></td-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"
      :total="pagination.total" background
      class="pagination" hide-on-single-page
      layout="total,prev,pager,next"
      @current-change="getLists"
    ></el-pagination>

    <operate-modal ref="modal" :modal-title="modalTitle" :modal-data="modalData" @save-success="reload"></operate-modal>
  </div>
</template>

<script>
import { del, loadEnergySavingProjectNumber, pageEnergySavingProjectList } from '@/api/energySavingProject'
import TdButton from '@/components/td-button'
import OperateModal from '@/views/energy-saving-management/projects/operate-modal'
import { confirmDel } from '@/utils'

const api = {
  pageEnergySavingProjectList,
  del,
  loadEnergySavingProjectNumber
}
export default {
  name: 'energy-efficiency-analysis-projects',
  components: { TdButton, OperateModal },
  data () {
    return {
      overview: [
        {
          label: '节能项目总数',
          count: '0',
          unit: '个'
        },
        {
          label: '节能项目总投资',
          count: '0',
          unit: '万元'
        },
        {
          label: '财政资金补助总金额',
          count: '0',
          unit: '万元'
        },
        // {
        //   label: '节能减排效果',
        //   count: '432',
        //   unit: '吨标准煤/万元'
        // }
      ],
      loading: false,
      lists: [],
      columns: [
        {
          label: '项目名称',
          prop: 'projectName'
        },
        {
          label: '项目类别',
          prop: 'itemCategory'
        },
        {
          label: '建设单位',
          prop: 'constructionUnit'
        },
        {
          label: '状态',
          prop: 'state'
        },
        {
          label: '项目备案时间',
          prop: 'filingTime'
        },
        {
          label: '总投资（万元）',
          prop: 'totalInvestment'
        },
        {
          label: '政府补助金额',
          prop: 'subsidyAmount'
        }
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        total: 0
      },
      modalTitle: '',
      modalData: {},
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  mounted () {
    this.loadEnergySavingProjectNumber()
    this.getLists()
  },
  methods: {
    loadEnergySavingProjectNumber () {
      return api.loadEnergySavingProjectNumber().then(res => {
        if (res.code === 200) {
          let { projectTotalInvestment, projectNumber, financialAid } = res.data || {}
          projectNumber = (Number(projectNumber) || 0).toLocaleString()
          projectTotalInvestment = (Number(projectTotalInvestment) || 0).toLocaleString()
          financialAid = (Number(financialAid) || 0).toLocaleString()
          this.overview = [
            {
              label: '节能项目总数',
              count: projectNumber,
              unit: '个'
            },
            {
              label: '节能项目总投资',
              count: projectTotalInvestment,
              unit: '万元'
            },
            {
              label: '财政资金补助总金额',
              count: financialAid,
              unit: '万元'
            }
          ]
        }
      })
    },
    getLists () {
      this.loading = true
      const params = {
        pageNumber: this.pagination.pageNumber,
        pageSize: this.pagination.pageSize,
      }
      return api.pageEnergySavingProjectList(params).then(res => {
        if (res.code === 200) {
          res.data.records.forEach(v => {
            v.totalInvestment = String(v.totalInvestment).replace(/\D/g, '')
            v.totalInvestment = v.totalInvestment ? v.totalInvestment + '万元' : null
            v.subsidyAmount = String(v.subsidyAmount).replace(/\D/g, '')
            v.subsidyAmount = v.subsidyAmount ? v.subsidyAmount + '万元' : null
          })
          this.lists = res.data.records
          this.pagination.total = res.data.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    reload () {
      this.loadEnergySavingProjectNumber()
      this.getLists()
    },
    add () {
      this.modalTitle = '新增信息'
      this.modalData = {}
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    edit (row) {
      this.modalTitle = '编辑信息'
      this.modalData = { ...row }
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    del (row) {
      confirmDel(this).then(() => {
        api.del(row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.reload()
          }
        })
      }).catch(() => {})
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.overview-item {
  background: white;
  border-radius: 4px;
  padding: $gutter;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex: 25%;

  & + & {
    margin-left: $gutter;
  }
}

.overview-label {
  font-size: 16px;
  margin-top: $gutter;
}

.overview-number {
  font-size: 22px;
  margin-right: 5px;
}

.overview-unit {
  color: #777777;
  font-size: 12px;
}
</style>
